<template>
  <h2>学生账号</h2>
  <div class="top">
    <el-input v-model="searchname" placeholder="请输入学生姓名" />
    <el-input v-model="searchxh" placeholder="请输入学生学号" />
    <!-- 下拉框2 -->
    <el-date-picker
      prefix-icon="el-icon-date"
      v-model="timer"
      class="xiala2"
      placeholder="请选择有效日期"
    >
    </el-date-picker>
    <!-- 下拉框3 -->
    <el-dropdown trigger="click" class="xiala3">
      <span class="el-dropdown-link">
        {{ reg ? reg : "请选择报名时间" }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item in filterTableData"
            :key="item"
            @click="choseRegTime(item.regTime)"
            >{{ item.regTime }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button type="primary">查询</el-button>
    <el-button type="info" @click="reset">重置</el-button>
  </div>
  <div class="cz">
    <el-button type="primary">导出</el-button>
    <el-button type="primary">新增</el-button>
  </div>
  <div class="content">
    <!-- 隐藏的编辑box
     -->
    <div class="editbox" v-if="show">
      <div class="top">
        <div class="left">详情</div>
        <div class="right" @click="gb">x</div>
      </div>
      <div class="msg">
        <ul>
          <li>
            <div class="msgtop">
              <span class="cfx"></span>
              <p>学员信息</p>
            </div>
            <div class="msgcontent">
              <p>
                学员姓名：<span>{{ personalData.name }}</span>
              </p>
              <p>
                性别:<span> {{ personalData.sex }}</span>
              </p>
              <p>
                报名时间:<span>{{ personalData.regTime }}</span>
              </p>
              <p>
                学号:<span> {{ personalData.xh }}</span>
              </p>
            </div>
          </li>
          <li>
            <div class="msgtop">
              <span class="cfx"></span>
              <p>家长信息</p>
            </div>
            <div class="msgcontent">
              <p>
                家长姓名：<span> {{ personalData.name }}</span>
              </p>

              <p>
                手机号码:<span> {{ personalData.phone }}</span>
              </p>
            </div>
          </li>
          <li>
            <div class="msgtop">
              <span class="cfx"></span>
              <p>课程统计</p>
            </div>
            <div class="msgcontent">
              <p>
                有效时间：<span> {{ personalData.validTime }}</span>
              </p>
              <p>
                已学课时:<span> {{ personalData.userTime }} /100</span>
              </p>
              <p>
                请假次数:<span> {{ personalData.relax }}</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-table
      :data="
        filterTableData.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      style="width: 100%"
      class="head"
    >
      <el-table-column label="">
        <template v-slot="scope">
          <input type="checkbox" v-model="scope.row.flag" />
        </template>
      </el-table-column>
      <el-table-column prop="xh" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="phone" label="家长电话" />
      <el-table-column prop="regTime" label="报名时间"> </el-table-column>
      <el-table-column prop="userTime" label="已用课时">
        <template v-slot="scope"> {{ scope.row.userTime }} /100 </template>
      </el-table-column>
      <el-table-column label="总金额" prop="allMoney"> </el-table-column>
      <el-table-column prop="relax" label="请假次数" />
      <el-table-column prop="validTime" label="有效期" />
      <el-table-column prop="" label="操作">
        <template v-slot="scope">
          <button @click="edit(scope.row.xh)">详情</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="left">
        <p><input type="checkbox" @click="choseall" />全选</p>
        <button>发短信</button>
        <button>发邮件</button>
        <button>导出</button>
      </div>
      <div class="demo-pagination-block">
        <div class="demonstration"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="sizes, prev, pager, next"
          :total="tableData.length"
          :page-sizes="[10, 20, 30, 40]"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ArrowDown } from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import stuAmount from "../../../mock/xszh.js";
export default {
  setup() {
    let tableData = ref([]);
    const input = ref("");
    let filterTableData = ref([]);
    onMounted(async () => {
      const res2 = await stuAmount.getDate();
      tableData.value = res2.data.data;
      filterTableData.value = tableData.value;
    });
    // 分页
    const total = ref(1000); //默认数据总数
    const pagesize = ref(10); //每页的数据条数
    const currentPage = ref(1); //默认开始页面
    const handleSizeChange = (size) => {
      // currentPage.value = 1;
      pagesize.value = size;
    };
    const handleCurrentChange = (index) => {
      // console.log(index);
      currentPage.value = index;
    };
    //

    // 根据名字
    const searchname = ref("");

    // 根据学号
    const searchxh = ref("");
    // const search = ref("");
    //
    watch(searchname, () => {
      filterTableData.value = tableData.value.filter(
        (data) => !searchname.value || data.name.includes(searchname.value)
      );
    });
    watch(searchxh, () => {
      filterTableData.value = tableData.value.filter(
        (data) => !searchxh.value || data.xh.includes(searchxh.value)
      );
    });
    //选择reg日期
    const reg = ref();
    const choseRegTime = (time) => {
      reg.value = time;
      filterTableData.value = tableData.value.filter((data) => {
        return data.regTime.includes(time);
      });
    };

    // 重置
    const reset = () => {
      filterTableData.value = tableData.value;
      searchxh.value = "";
      searchname.value = "";
      timer.value = "";
    };
    // 日历
    const timer = ref(new Date());
    //日期格式yyyy--dd--mm
    const getNowFormatDate = (timer) => {
      var seperator1 = "-";
      var year = timer.value.getFullYear();
      var month = timer.value.getMonth() + 1;
      var strDate = timer.value.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    };
    // 选择有效日期
    watch(timer, () => {
      if (timer.value) {
        const res = getNowFormatDate(timer);
        console.log(res);
        filterTableData.value = tableData.value.filter((data) => {
          return data.validTime.includes(res);
        });
      } else {
        filterTableData.value = tableData.value;
      }
      searchxh.value = "";
      searchname.value = "";
    });
    // 详情
    const show = ref(false);
    const personalData = ref({});
    const edit = async (xh) => {
      console.log(xh);
      const res = await stuAmount.edit(xh);
      personalData.value = res;
      show.value = true;
    };
    // 关闭
    const gb = () => {
      show.value = false;
    };
    // 全选
    let nums = 1;
    const choseall = () => {
      nums++;
      if (nums % 2 == 0) {
        tableData.value.forEach((element) => {
          element.flag = true;
        });
      } else {
        tableData.value.forEach((element) => {
          element.flag = false;
        });
      }
    };
    return {
      input,
      tableData,
      total,
      pagesize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      choseall,

      filterTableData,
      // filterTableData2,
      searchname,
      searchxh,
      choseRegTime,
      reset,
      // validRegTime,
      timer,
      edit,
      show,
      gb,
      personalData,
      reg,
    };
  },
  components: {
    "arrow-down": ArrowDown,
  },

  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
// 下拉菜单
/deep/.el-dropdown--default {
  margin: 0 auto;
}

.xiala2 {
  width: 260px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  margin-left: 15px;
  .el-dropdown-link {
    display: block;
    width: 270px;
  }
  .el-icon {
    margin-left: 30px;
  }
}
.xiala3 {
  width: 240px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  margin-left: 15px;
  .el-dropdown-link {
    display: block;
    width: 240px;
  }
  .el-icon {
    margin-left: 30px;
  }
}
/deep/.el-popper {
  left: 270px;
}
/deep/.el-dropdown-menu__item {
  width: 120px;
}
// 每页多少条数据
/deep/.el-pagination__sizes {
  .el-input {
    /deep/.elinput__inner {
      width: 110px;
    }
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

// 输入框

.top {
  display: flex;
  margin: 10px auto;
  justify-content: space-between;
  /deep/.el-input--default {
    width: 240px;
  }
  /deep/.el-input__inner {
    width: 240px;
    height: 40px;
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    margin-left: 10px;
    color: #999999;
    //bgc
    background: #f7f7f7;
  }
}
// 按钮
.el-button {
  margin-left: 30px;
}

// btn2
.cz {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  .el-button {
    width: 160px;
  }
}
//
.content {
  position: relative;
}

// 内容头部
/deep/.head {
  thead {
    .cell {
      background: #acc5ff;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }
}

/deep/.cell {
  text-align: center;
  img {
    cursor: pointer;
  }
  button {
    width: 40px;
    height: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #598cff;
    line-height: 18px;
    border: none;
    background-color: transparent;
    margin-left: 8px;
  }
}
//编辑删除
.editbox {
  width: 349px;
  height: 550px;
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  .editbtn {
    display: flex;
  }
  .top {
    background-color: #457dfb;
    width: 349px;
    height: 40px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .left,
    .right {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    .right {
      cursor: pointer;
    }
  }
  .msg {
    padding-left: 30px;
    li {
      margin-top: 15px;
      .msgtop {
        p {
          display: inline-block;
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          color: #444444;
          margin: 2px 0 30px 3px;
        }
      }
      .msgcontent {
        margin-left: 29px;
      }
    }
    .cfx {
      display: inline-block;
      width: 4px;
      height: 24px;
      background: #457dfb;
      border-radius: 2px;
      vertical-align: middle;
    }
  }
}
// 底部布局
.bottom {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    width: 200px;
    justify-content: space-between;
  }
  .demo-pagination-block {
    display: flex;
    justify-content: flex-end;
  }
}
.el-dropdown-menu {
  height: 300px;
  overflow: auto;
}
</style>
